<template>
  <!-- 流程图 -->
  <div>
    <a-modal
      title="流程图"
      :visible="visible"
      :bodyStyle="{ overflow: 'auto' }"
      @cancel="visible = false"
      :footer="null"
    >
      <img :src="processimg" :data-original="processimg" />
    </a-modal>
    <div class="imageBox" v-if="showChart">
      <a-button @click="showImg" icon="search"> 流程图 </a-button>
    </div>
    <!-- 审批记录 -->
    <div class="timeLineArea">
      <a-timeline>
        <a-timeline-item v-for="(item, index) in formcolumns" :key="index">
          <!-- <a-icon
            :style="`color: ${index == formcolumns.length - 1 ? '#00d2b7' : Tp_actionStyle[item.action]};`"
            slot="dot"
            type="check-circle"
            class="timeLineArea_icon"
          /> -->
          <img src="@/assets/images/check.png" slot="dot" alt="" />

          <div class="timeLineArea_item">
            <div class="timeLineArea_item_body_head_time">
              {{ item.time.substring(0, 11) }}
            </div>
            <div class="timeLineArea_item_proc">
              {{ item.instname }}
            </div>
            <div class="timeLineArea_item_body">
              <div class="timeLineArea_item_body_head">
                <div class="timeLineArea_item_body_head_username">
                  {{ item.username }}
                </div>
                <!-- <div class="timeLineArea_item_body_head_time">
                  {{ item.time }}
                </div> -->
              </div>
              <div class="timeLineArea_item_body_step">
                <template v-if="item.taskname">{{ item.taskname }}</template>
                <template v-if="item.type">
                  <template v-if="item.taskname">： </template>
                  <span class="timeLineArea_item_body_step_type">{{ item.type }}</span>
                </template>
              </div>
              <!-- 意见 -->
              <div class="timeLineArea_item_body_content">
                {{ item.message }}
              </div>
            </div>
          </div>
        </a-timeline-item>
      </a-timeline>
    </div>
  </div>
</template>
<script>
import { Tp_actionStyle } from '@/enumeration/Tp_action.js'
import { queryComment } from '@/api/workflow/mf_MyTaskUndo.js'
import { BASE_URL } from '@/utils/request.js'
export default {
  props: {
    processinstanceid: {
      type: String,
      require: true
    },
    // 组件宽度
    width: {
      type: String,
      default: '60%'
    },
    // 是否自动初始化数据
    autoCreated: {
      type: Boolean,
      default: false
    },
    // 是否展示图表
    showChart: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      visible: false,
      processimg: '', // 预览图片路径
      Tp_actionStyle: Tp_actionStyle, // 样式
      formcolumns: [] // 表单审批记录
    }
  },
  created () {
    // 加载流程图片
    this.processimg = `${BASE_URL}/flow/viewFlowChart?processinstanceid=${this.processinstanceid}`
    // console.log('图片', this.processimg)
    // 自动初始化
    if (this.autoCreated) {
      this.getProcessingRecord()
    }
  },
  methods: {
    // 显示流程图
    showImg () {
      this.visible = true
    },
    // 查询流程审批记录
    async getProcessingRecord () {
      let params = {
        processinstanceid: this.processinstanceid
      }
      // console.log('params', params)
      await queryComment(params).then(res => {
        console.log('流程审批记录', res)
        if (res.code == 0) {
          this.formcolumns = res.data || []
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.imageBox {
  display: flex;
  justify-content: flex-end;
  display: none;
}
.timeLineArea {
  // margin: 0 auto;
  // border: 1px solid red;
  background-color: #fff;
  ::v-deep &_icon svg {
    width: 20px;
    height: 20px;
  }
  height: 75vh;
  overflow: auto;
  padding: 30px;
  &_item {
    // border: 1px solid red;
    padding-top: 8px;
    &_proc {
      font-family: PingFang SC;
      font-weight: 540;
      font-size: 16px;
      color: #000000;
      // border: 1px solid pink;
    }
    &_body {
      margin-top: 12px;
      // padding: 10px 0 20px 20px;
      // background-color: #f6f9fe;
      border-radius: 10px;
      &_head,
      &_step,
      &_content {
        margin-top: 6px;
      }
      &_head {
        color: #2f2f2f;
        // border: 1px solid red;
        display: flex;
        justify-content: space-between;
        &_username {
          color: #9c9c9c;
          // font-weight: 800;
          font-size: 16px;
        }
        &_time {
          // font-weight: 600;
          font-size: 16px;
          margin-right: 20px;
          color: #64676c;
        }
      }
      &_step {
        // border: 1px solid black;
        // font-weight: 800;
        // font-size: 16px;
        // color: #929699;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #00ae08;
        &_type {
          color: #69aa91;
        }
      }
      &_content {
        // margin-left: 16px;
        // font-weight: 800;
        // font-size: 16px;
        // color: #929699;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #9c9c9c;
        background-color: #f2f8fc;
        border-radius: 5px;
        padding: 10px;
        // border: 1px solid blue;
      }
    }
  }
}
.timeLineArea_item_body_head_time {
  font-family: PingFang SC;
  font-weight: 540;
  font-size: 18px;
  color: #000000;
}
/deep/.ant-timeline-item-content {
  top: -16px;
  right: -16px;
}
</style>
